<template>
    <div class="app-container">
        <el-form :model="main.queryParams" size="small" :inline="true" v-show="main.showSearch">
            <el-form-item label="选择酒店" prop="hotelName">
                <el-select v-model="main.queryParams.hotelId" filterable placeholder="请选择" clearable>
                    <el-option v-for="item in main.hotelListAll" :key="item.hotelId" :label="item.hotelName"
                        :value="item.hotelId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="openAddHotelJzj">新增酒店结转金</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="main.loading" :data="main.hotelJjzList" style="width: 100%">
            <el-table-column label="酒店ID" prop="hotelId" />
            <el-table-column label="酒店名称" prop="hotelName" />
            <el-table-column label="转入结转金总额" prop="jzjZrTotal" />
            <el-table-column label="支出结转金汇总" prop="jzjZcTotal" />
            <el-table-column label="待结转金额" prop="jzjPrice" />
            <el-table-column label="操作" align="center" fixed="right" width="120px">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="openEditHotelJzj(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="main.hotelJjzListTotal > 0" :total="main.hotelJjzListTotal"
            :page.sync="main.queryParams.pageNum" :limit.sync="main.queryParams.pageSize"
            @pagination="getHotelJjzList" />

        <el-dialog :title="operationHotelJzj.title" :visible.sync="operationHotelJzj.isShow" width="780px"
            append-to-body>
            <el-form ref="operationHotelJzjRef" :rules="operationHotelJzj.rules" :model="operationHotelJzj.form"
                label-width="130px">
                <el-row>
                    <el-col :span="11">
                        <el-form-item prop="hotelId" label="酒店名称">
                            <el-select v-model="operationHotelJzj.form.hotelId"
                                :disabled="operationHotelJzj.form.id != null" filterable placeholder="请选择" clearable>
                                <el-option v-for="item in main.hotelListAll" :key="item.hotelId" :label="item.hotelName"
                                    :value="item.hotelId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item prop="jzjZrTotal" label="转入结转金总额">
                            <el-input v-model="operationHotelJzj.form.jzjZrTotal" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item prop="jzjZcTotal" label="支出结转金汇总">
                            <el-input v-model="operationHotelJzj.form.jzjZcTotal" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item prop="jzjPrice" label="待结转金额">
                            <el-input v-model="operationHotelJzj.form.jzjPrice" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="postOperationHotelJzj" :loading="operationHotelJzj.loading">确
                    定</el-button>
                <el-button @click="closeOperationHotelJzj">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getHotelListAll } from "@/api/hotel/hotel";
import { getHotelJjzList, getHotelJjzById, postEditHotelJzj, postAddHotelJzj } from "@/api/hotel/orderRegisterJzj";

export default {
    name: 'HotelJzj',
    data() {
        return {
            main: {
                loading: false,
                showSearch: true,
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    hotelId: undefined
                },
                hotelListAll: [],
                hotelJjzList: [],
                hotelJjzListTotal: 0
            },
            operationHotelJzj: {
                isShow: false,
                loading: false,
                title: undefined,
                rules: {
                    hotelId: [
                        { required: true, message: "请选择酒店", trigger: "blur" },
                    ],
                    jzjZrTotal: [
                        { required: true, message: "请输入结转金转入总额", trigger: "blur" },
                    ],
                    jzjZcTotal: [
                        { required: true, message: "请输入支出结转金汇总", trigger: "blur" },
                    ],
                    jzjPrice: [
                        { required: true, message: "请输入待结转金额", trigger: "blur" },
                    ]
                },
                form: {

                }
            }
        }
    },
    created() {
        this.getHotelListAll();
        this.getHotelJjzList();
    },
    methods: {
        getHotelListAll() {
            getHotelListAll().then(response => {
                this.main.hotelListAll = response.data;
            }
            );
        },
        getHotelJjzList() {
            this.main.loading = true;
            getHotelJjzList(this.main.queryParams).then(response => {
                this.main.hotelJjzList = response.rows;
                this.main.hotelJjzListTotal = response.total;
                this.main.loading = false;
            }
            );
        },
        handleQuery() {
            this.getHotelJjzList();
        },
        openAddHotelJzj() {
            this.operationHotelJzj.form = {};
            this.operationHotelJzj.title = '新增酒店结转金';
            this.operationHotelJzj.isShow = true;
        },
        openEditHotelJzj(row) {
            const id = row.id;
            getHotelJjzById({ id }).then(res => {
                this.operationHotelJzj.form = res.data;
                this.operationHotelJzj.title = '编辑酒店结转金';
                this.operationHotelJzj.isShow = true;
            }
            );
        },
        postOperationHotelJzj() {
            this.$refs["operationHotelJzjRef"].validate(valid => {
                if (valid) {
                    if (this.operationHotelJzj.form.id) {
                        postEditHotelJzj(this.operationHotelJzj.form).then(res => {
                            this.$modal.msgSuccess("修改成功");
                            this.operationHotelJzj.isShow = false;
                            this.getHotelJjzList();
                        });
                    } else {
                        postAddHotelJzj(this.operationHotelJzj.form).then(res => {
                            this.$modal.msgSuccess("新增成功");
                            this.operationHotelJzj.isShow = false;
                            this.getHotelJjzList();
                        });
                    }

                }
            })

        },
        closeOperationHotelJzj() {
            this.operationHotelJzj.isShow = false;
        }
    },
    computed: {

    }
}
</script>

<style></style>